<!-- Tab.vue -->
<template>
  <div class="tab-container w-full h-8">
    <div class="tab-headers flex justify-around leading-8 my-1 text-sm">
      <button
        v-for="tab in tabs"
        :key="tab.title"
        style="
          height: 100%;
          width: 30%;
          background-color: #40c3c8;
          border: 1px solid #385458;
          border-radius: 5px;
          box-shadow: #385458 4px 3px;
        "
        @click="switchTab"
      >
        {{ tab.title }}
      </button>
    </div>
    <component :is="activeComponent" class="tab-content bg-amber-300" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, defineProps } from "vue";

interface TabItem {
  title: string;
  component: string;
}

const props = defineProps({
  tabs: {
    type: Array as () => TabItem[],
    required: true
  }
});
const activeTab = ref(props.tabs[0].title);
const activeComponent = ref(
  props.tabs.find(tab => tab.title === activeTab.value)?.component
);

const switchTab = (title: string) => {
  activeTab.value = title;
  activeComponent.value = props.tabs.find(
    tab => tab.title === title
  )?.component;
};

onMounted(() => {
  switchTab();
});
</script>

<style scoped lang="scss">
.tab-container {
  /* Your styles here */
}
.tab-headers {
  /* Styles for the tab headers */
}
.tab-headers button {
  /* Style for tab header buttons */
}
.tab-headers button.active {
  /* Style for the active tab header button */
}
.tab-content {
  /* Styles for the tab content */
}
</style>
